<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>淘有货后台管理系统</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <%--<link rel="shortcut icon" href="${pageContext.request.contextPath}/font/favicon.ico" type="image/x-icon"/>--%>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/main/font.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/main/xadmin.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/swiper.min.css">
    <script type="text/javascript" src="${pageContext.request.contextPath}/static/js/login/jquery.min.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/static/js/swiper.jquery.min.js"></script>
    <script src="${pageContext.request.contextPath}/static/lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/static/js/main/xadmin.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/static/js/api/adminStore.js"></script>

</head>
<body>
<!-- 中部开始 -->
<div class="wrapper">
    <!-- 右侧主体开始 -->
    <div class="page-content">
        <div class="content">
            <!-- 右侧内容框架，更改从这里开始 -->
            <form id="touch" class="layui-form">
                <div class="layui-form-item">
                    <label for="name" class="layui-form-label">
                        <span class="x-red">*</span>商品名
                    </label>
                    <div class="layui-input-inline">
                        <input type="text" id="name" name="name" required="" lay-verify="name" value=""
                               autocomplete="off" class="layui-input">
                    </div>
                    <!-- <div class="layui-form-mid layui-word-aux">
                <span class="x-red">*</span>将会成为您唯一的登入名
            </div> -->
                </div>
                <div class="layui-form-item" style="height: 100px;line-height: 100px">
                    <label for="image" class="layui-form-label">
                        <span class="x-red">*</span>商品图片
                    </label>

                    <div class="layui-input-inline" style="width: 70px;;">
                        <input type="file" id="file" name="file" required="" accept="image/jpg,image/png"
                               autocomplete="off" hidden>
                        <input type="button" class="layui-btn layui-btn-normal layui-btn-small" value="上传图片"
                               onclick="fileclick()">
                    </div>

                    <div class="layui-input-inline">

                        <img id="image" src="" alt=""
                             style="width: 70px;height: 70px;position: absolute;float: right;top:-5px;">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label for="cid" class="layui-form-label">
                        <span class="x-red">*</span>商品分类
                    </label>
                    <div class="" style="width: 47%;display: inline-block">
                        <select name="cid" id="cid">
                            <c:forEach items="${list}" var="item">
                                <<option value="${item.cid}">${item.cname}</option>
                            </c:forEach>
                        </select>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label for="marketPrice" class="layui-form-label">
                        <span class="x-red">*</span>商品原价
                    </label>
                    <div class="layui-input-inline">
                        <input type="number" id="marketPrice" name="marketPrice" required="" value=""
                               lay-verify="pass" autocomplete="off"
                               class="layui-input">
                    </div>
                    <!-- <div class="layui-form-mid layui-word-aux">
                6到16个字符
            </div> -->
                </div>
                <div class="layui-form-item">
                    <label for="shelfPrice" class="layui-form-label">
                        <span class="x-red">*</span>商城价格
                    </label>
                    <div class="layui-input-inline">
                        <input type="number" id="shelfPrice" name="shelfPrice" value="" required=""
                               lay-verify="shelfPrice"
                               autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label for="detail" class="layui-form-label">
                        商品描述
                    </label>
                    <div class="layui-input-inline">
                        <textarea id="detail" name="detail" placeholder="" required="" rows="5" cols="30"
                                  autocomplete="off" class="layui-textarea"></textarea>
                        <%--<textarea id="desc" name="desc" placeholder="请输入内容"  class="layui-textarea"></textarea>--%>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label for="AddProduct" class="layui-form-label">
                    </label>
                    <input type="button" value="添加" id="AddProduct" class="layui-btn" lay-filter="add" lay-submit="">

                    </input>
                </div>
            </form>
            <!-- 右侧内容框架，更改从这里结束 -->
        </div>
    </div>
    <!-- 右侧主体结束 -->
</div>
<!-- 中部结束 -->
<script>
    //百度统计可去掉
    var _hmt = _hmt || [];
    (function () {
        var hm = document.createElement("script");
        hm.src = "https://hm.baidu.com/hm.js?b393d153aeb26b46e9431fabaf0f6190";
        var s = document.getElementsByTagName("script")[0];
        s.parentNode.insertBefore(hm, s);
    })();
</script>
</body>

<script type="text/javascript">

    img = "";
    $("input[type='file']").change(function () {
        var file = this.files[0];
        if (window.FileReader) {
            var reader = new FileReader();
            reader.readAsDataURL(file);
            //监听文件读取结束后事件
            reader.onloadend = function (e) {
                img = getBase64Image(reader.result);
                $("#image").attr("src", e.target.result); //e.target.result就是最后的路径地址
            };
        }
    });
    getBase64Image = function (imgElem) {
        // return imgElem.replace("/^data:image\/(jpeg|jpg);base64,/", "");
        return imgElem.split(",")[1];
    }

    $("#AddProduct").click(function () {
        var dataform = new FormData(document.getElementById("touch"));
        console.log(dataform);
        var pid = Date.now().toString();
        dataform.append("pid",pid);
        dataform.append("image", img);
        if (img != "") {
            $.ajax({
                type: "post",
                url: "${pageContext.request.contextPath}/product/AddProduct.do",
                //                下面内容未完成
                data: dataform,
                processData: false,
                contentType: false,
                success: function (s) {
                    if (s.success) {
                        alert(s.msg);
                        <%--window.location.href = "${pageContext.request.contextPath}/product.do";--%>
                        x_admin_close();
                    } else {
                        alert(s.msg);
                    }
                }
            })
        } else {
            layer.msg('请先添加图片!', {
                icon: -1,
                time: 1000
            });
        }
    });


    fileclick = function () {
        $("input[name='file']").click();
    }
</script>
</html>
